<template>
  <div class="homedata">
    <div class="menu">
      <div class="menu1">
        <ul class="ul1">
          <li
            v-for="(item, key) in catemenu"
            :key="item.id"
            @mouseenter="index = key"
          >
            <RouterLink to="/category">{{ item.name }} </RouterLink>

            <template v-if="item.children">
              <RouterLink to="/" v-for="it in item.children" :key="it.id">
                {{ it.name }}
              </RouterLink>
            </template>

            <template v-if="!item.children">
              <skeleton width="50px" height="20px"></skeleton>
              <skeleton width="50px" height="20px"></skeleton>
            </template>

            <div class="showcate">
              <h3>
                {{ classifytext.keys == "code" ? "分类推荐" : "品牌推荐" }}
                <small>根据您的购买或浏览记录推荐</small>
              </h3>
              <ul
                class="ul2"
                v-if="classifytext.keys && classifytext.keys == 'code'"
              >
                <li v-for="(it, k) in classifytext.goods" :key="k">
                  <RouterLink to="/" class="routerss">
                    <img :src="it.picture" alt="" />
                    <div class="info">
                      <p class="name ellipsis-2">
                        {{ it.name }}
                      </p>
                      <p class="desc ellipsis">{{ it.place }}</p>
                      <p class="price"><i>¥</i>{{ it.price }}</p>
                    </div>
                  </RouterLink>
                </li>
              </ul>

              <ul
                class="ul2"
                v-if="classifytext.keys && classifytext.keys == 'header'"
              >
                <li v-for="(it, k) in classifytext.goods" :key="k">
                  <RouterLink to="/" class="routerss">
                    <img :src="it.picture" alt="" />
                    <div class="info">
                      <p class="name ellipsis-2">
                        {{ it.name }}
                      </p>
                      <p class="desc ellipsis">{{ it.place }}</p>
                      <!-- <p class="price"><i>¥</i>{{ it.price }}</p> -->
                    </div>
                  </RouterLink>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <SwiperBox></SwiperBox>
  </div>
</template>

<script>
import { classify } from "@/utils/Api/NavText";
import SwiperBox from "../home/SwiperBox.vue";
export default {
  components:{SwiperBox},
  data() {
    return {
      classtext: [],
      index: 0,
    };
  },
  computed: {
    catemenu() {
      let a = {
        id: "111",
        name: "品牌",
        children: [
          {
            id: "12311",
            name: "品牌推荐",
          },
        ],
      };
      let list = this.$store.state.nav.navigation.map((item) => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2),
        };
      });
      list.push(a);
      return list;
    },
    classifytext() {
      var obj = {
        keys: "",
        goods: [],
      };
      if (this.index <= 8) {
        obj = {
          keys: "code",
          goods: this.$store.state.nav.navigation[this.index].goods,
        };
      } else {
        obj = {
          keys: "header",
          goods: this.classtext,
        };
      }
      return obj;
    },
  },
  methods: {
    async getclassify() {
      let list = await classify();
      this.classtext = list.result.slice(0, 6);
      // console.log(this.classtext);
    },
  },
  mounted() {
    this.getclassify();
  },
};
</script>

<style lang="scss" scoped>
.homedata {
  width: 1240px;
  height: 500px;
  margin: auto;
  // background-color: red;
  position: relative;
  .menu {
    width: 100%;
    height: 100%;
    // display: flex;
    .menu1 {
      width: 250px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.695);
      position: relative;
      z-index: 99;
      a {
        color: white;
      }
      li {
        width: 100%;
        height: 50px;
        // background-color: rgb(59, 203, 11);
        padding-left: 30px;
        line-height: 50px;
        box-sizing: border-box;
        font-size: 16px;
        &:hover {
          background-color: #27ba9b;
          .showcate {
            display: block;
          }
        }
      }
    }
    .showcate {
      // flex: 1;
      width: 990px;
      height: 500px;
      background-color: rgba(255, 255, 255, 0.652);
      display: none;
      position: absolute;
      left: 250px;
      top: 0;
      h3 {
        font-size: 26px;
        margin: 5px 0 5px 25px;
      }
      .ul2 {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        li {
          line-height: 20px;
          padding: 13px 3px 3px 3px;
          margin-left: 10px;
        }
        li:hover {
          background-color: #e3f9f4;
        }
        .routerss {
          display: flex;
          padding: 3px;
          .price {
            font-size: 25px;
            color: red;
          }
          .name {
            font-weight: 600;
            // font-size: 15px;
            color: #aaa;
          }
          .info {
            padding: 5px;
          }
          .desc {
            color: #ccc;
            margin: 5px 0 5px 0;
          }
        }

        li {
          width: 32%;
          height: 130px;
          background-color: #fff;
          margin-top: 10px;
        }
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
